<template>
	<view class="" style="padding-bottom: 150rpx;">
		<!-- 首页广告 -->
		<u-popup :show="ggshow" @close="ggclose" mode="center" round="10">
			<view class="mainpadding dingwei">
				<view class="guandys" @click="ggclose">
					<u-icon name="close-circle-fill" color="#d1d1d1" size="32"></u-icon>
				</view>
				<view class="guangtu" style="margin-top: 80rpx;" @click="jumpggdetail()">
					<image :src="popimages" mode=""></image>
				</view>
			</view>
		</u-popup>
		<!-- 区域弹框 -->
		<u-popup :show="qyshow" @close="qyshow=false" mode="bottom">
			<scroll-view scroll-y="true" style="height: 600rpx;">
				<view class="xiangaotk">
					<view class="" style="padding: 30rpx 0 60rpx;">
						<view class="xiahuaxian ershiba textcenter margin_top"
							:class="item.id==checkarea.id?'fonweight xiaohei':'nofonweight xiaohui'"
							v-for="item in areaList" :key="item.id" @click="checkareafn(item)">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
			<view class="flexbetween gudingdb ffffff mainpadding" style="z-index: 12;">
				<view class="wushi flexcenter">
					<view class="chongzhibtn" @click="qyclose()">重置</view>
				</view>
				<view class="wushi flexcenter" @click="qyconfirm()">
					<view class="quedbtn">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 时间 -->
		<u-popup :show="sjshow" @close="sjclose" mode="bottom">
			<view class="xiangaotk">
				<shijian></shijian>
				<view class="flexbetween gudingdb ffffff mainpadding">
					<view class="wushi flexcenter">
						<view class="chongzhibtn">重置</view>
					</view>
					<view class="wushi flexcenter" @click="sjclose">
						<view class="quedbtn">确定</view>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="ffffff mainpadding">
			<!-- 搜索 -->
			<view class="flexbetween">
				<view class="" @click="dakdiz" v-if="cityinfo.name">
					<view class="dizhi marginauto"></view>
					<view class="strongtext nofonweight sanzi xiaohei" >{{cityinfo.name}}</view>
				</view>
				<view class="" @click="getlocation" v-else>
					<view class="dizhi marginauto"></view>
					<view class="strongtext nofonweight sanzi xiaohei">定位</view>
				</view>
				<view class="ssousuobox flexleft dingwei" style="width: 78%;" @click="tzsousuo">
					<view class="flexleft" @click.stop="dakai">
						<view class="xiaohei strongtext nofonweight margin_right1">{{ss_type==1?'场地':'课程'}}</view>
						<image class="xxuanze margin_right2" src="../static/image/system/xiala.png" mode=""></image>
						<view class="line"></view>
					</view>
					<view class="">
						<input type="text" placeholder="请输入搜索关键词" :disabled="true">
					</view>
					<view class="dyshaow mainpadding" v-if="yinc == true">
						<view class=" ershil xiahuaxian textcenter" :class="ss_type==1?'xiaolv':'xiaohei'"
							@click.stop="ss_type=1;yinc=false">场地</view>
						<view class=" ershil margin_top2 textcenter" :class="ss_type==2?'xiaolv':'xiaohei'"
							@click.stop="ss_type=2;yinc=false">课程</view>
					</view>
				</view>
			</view>
			<!-- 轮播 -->
			<view class="margin_top">
				<u-swiper :list="list1" circular height="180px" @click="tzlbxq"></u-swiper>
			</view>
			<!-- 公告 -->
			<view class="margin_top radius" @click="tzgg">
				<u-notice-bar :text="text1" direction="column" bgColor="#F9F9F9" color="#777777"></u-notice-bar>
			</view>
			<!-- 分类图片 -->
			<view class="margin_top">
				<view class="flexbetween">
					<view class="xfltup" @click="tzgywm(2)">

						<image src="../static/image/system/ms.png" mode=""></image>
					</view>
					<view class="xfltup" @click="tzgywm(4)">
						<image src="../static/image/system/kj.png" mode=""></image>
					</view>
					<view class="xfltup" @click="tzgywm(3)">
						<image src="../static/image/system/tg.png" mode=""></image>
					</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="dftp" @click="jumpurl('/pages_mypage/dakalingjf')">
						<image src="../static/image/system/mrdk.png" mode=""></image>
					</view>
					<!-- <view class="dftp" @click="tzgywm(5)">
						<image src="../static/image/system/jfdh.png" mode=""></image>
					</view> -->
					<view class="dftp" @click="jumpurl('/pages_mypage/jifenduihuan')">
						<image src="../static/image/system/jfdh.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!--场地预定 和 课程购买-->
		<view class="margin_top2 ffffff mainpadding">
			<u-tabs :list="list2" lineColor="#1BA95B" @click="changetab" :activeStyle="{
				    color: '#333333',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				            color: '#333333',
							fontWeight: '400',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 5px; padding-right: 10px; height: 44px;"></u-tabs>
			<!-- 项目分类 -->
			<view class=" margin_top1">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H uni-bg-red" style="padding: 4rpx 0;" v-for="item in xmList"
						:key="item.id" @click="cg_category_id=item.id;init()">
						<!--已选中状态 -->
						<view class="xuanzbtn margin_right2" v-if="item.id==cg_category_id">
							<view class="anicon margin_right2">
								<image src="../static/image/system/lanqiu.png" mode=""></image>
							</view>
							<view class="">{{item.name}}</view>
						</view>
						<view class="weixbtn margin_right2" v-else>
							<view class="anicon margin_right2">
								<image src="../static/image/system/zuqiu.png" mode=""></image>
							</view>
							<view class="">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 筛选 -->
			<view class="flexbetween margin_top">
				<view class="flexleft" @click="qyshow=true" v-if="cityinfo.name">
					<view class="xiaohei ershil nofonweight sanzi margin_right1">
						{{checkareasure.name || cityinfo.name}}
					</view>
					<view class="xiasajx"></view>
				</view>
				<view class="flexleft" @click="changejlpx">
					<view class="xiaohei ershil nofonweight margin_right1">距离</view>
					<view class="">
						<view class="shangsjx" v-show="distance_sort!=2"></view>
						<view class="shangsjxs" v-show="distance_sort==2"></view>
						<view class="xiasajx  margin_top0" v-show="distance_sort!=1"></view>
						<view class="xiasajxs  margin_top0" v-show="distance_sort==1"></view>
					</view>
				</view>
				<!-- <view class="flexleft" @click="sjshow = true">
					<view class="xiaohei ershil nofonweight margin_right1">时间</view>
					<view class="xiasajx"></view>
				</view> -->
				<view class="flexleft" @click="changehp">
					<view class="xiaohei ershil nofonweight margin_right1">好评</view>
					<view class="">
						<view class="shangsjx" v-show="star_sort!=2"></view>
						<view class="shangsjxs" v-show="star_sort==2"></view>
						<view class="xiasajx  margin_top0" v-show="star_sort!=1"></view>
						<view class="xiasajxs  margin_top0" v-show="star_sort==1"></view>
					</view>
				</view>
				<view class="flexleft" @click="changejg">
					<view class="xiaohei ershil nofonweight margin_right1">价格</view>
					<view class="">
						<view class="shangsjx" v-show="price_sort!=2"></view>
						<view class="shangsjxs" v-show="price_sort==2"></view>
						<view class="xiasajx  margin_top0" v-show="price_sort!=1"></view>
						<view class="xiasajxs  margin_top0" v-show="price_sort==1"></view>
					</view>
				</view>
			</view>
			<!-- 按钮分类 -->
			<view class="margin_top" v-if="currenttabtow==0">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H uni-bg-red" v-for="item in cdbqList" :key="item.id"
						@click="changeitem(item)">
						<!-- 已选中 -->
						<view class=" margin_right1" :class="cg_bq_id==item.id?'lvbtn':'huibtn'">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<!-- 场地预定 -->
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<template v-if="currenttabtow==0">
				
				<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.id" @click="tzcdyd(item.id)">
					<view class="flexbetween">
						<view class="shilitu">
							<image :src="item.logo_text" mode=""></image>
						</view>
						<view class="" style="width: 69%;">
							<view class="titletext xiaohei fonweight yhxk">{{item.name}}</view>
							<!-- <view class="flexleft margin_top1">
								<view class="flexleft margin_right2">
									<view class="xingxing margin_right1"></view>
									<view class="xiaohuang smalltext nofonweight">5.0</view>
								</view>
								<view class="smalltext xiaohui nofonweight">1234条评价</view>
							</view> -->
							<view class="flexbetween margin_top2">
								<view class="flexleft ">
									<view class="smalltext xiaohui nofonweight margin_right2">{{item.username}}</view>
									<view class="line margin_right2"></view>
									<view class="smalltext xiaohui nofonweight">{{item.cityinfo}}</view>
								</view>
								<view class="smalltext xiaohei nofonweight" v-if="cityinfo.name">{{returnKmUnit(Number(item.distance))}}</view>
							</view>
							<view class="flexleft margin_top2">
								<view class="huibtn margin_right1 yhxk" v-for="(ite,inde) in item.bq_names_text" :key="inde" v-if="inde<2">{{ite}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 课程 -->
			<template v-if="currenttabtow == 1">
				<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.id" @click="tzkecxq(item.id)">
					<view class="flexbetween">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="" style="width: 69%;">
							<view class="titletext xiaohei fonweight yhxk">{{item.name}}</view>
							<view class="flexleft margin_top2">
								<view class="smalltext xiaohui nofonweight margin_right2">{{item.userzbfapply.name}}
								</view>
								<view class="line margin_right2"></view>
								<view class="smalltext xiaohui nofonweight yhxk">{{item.cityinfo}}
								</view>
							</view>
							<view class="flexbetween margin_top2">
								<view class="sanshier xiaohong fonweight">¥ {{item.priceinfo.price}}</view>
								<view class="smalltext xiaohei nofonweight">{{returnKmUnit(Number(item.distance))}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<tabbaryhd current=0></tabbaryhd>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	
	import {checkOpenGPSServiceByAndroid} from "@/common/device.js"
	export default {
		data() {
			return {
				ggshow: false,
				qyshow: false,
				sjshow: false,
				yinc: false,
				list1: [],
				text1: [],
				list2: [{
						name: '场地预定',
						value: 1,
					},
					{
						name: '课程购买',
						value: 2
					}
				],
				currenttabtow: 0,
				lat: "",
				lng: "",
				cityinfo: {},
				popimages: "",
				popurl:"",
				bannerList: [],
				xmList: [],
				checkarea: { //区内容
					name: "", //名称
					id: "", //id
				},
				checkareasure: { //区内容
					name: "", //名称
					id: "", //id
				},
				areaList: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				cg_category_id: "",
				distance_sort: 0,
				star_sort: 0,
				price_sort: 0,
				ss_type: 1, //1场地,2课程
				cg_bq_id: "",
				cdbqList: [],
				isload:false
			}
		},
		onLoad(options) {
			this.isload = true
			uni.hideTabBar()
			if (options.rec_user_id) {
				uni.setStorageSync("rec_user_id", options.rec_user_id)
				console.log(options,"首页接收的参数");
			}
			if (options.pt_user_id) {
				uni.setStorageSync("pt_user_id", options.pt_user_id)
			}
			if (options.cg_user_id) {
				uni.setStorageSync("cg_user_id", options.cg_user_id)
			}
			// #ifdef MP-WEIXIN
			let _this = this
			const url = decodeURIComponent(options.q) // 获取到二维码原始链接内容
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				let theRequest = {};
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
				}
				console.log(theRequest,"二维码接收的参数");
				let rec_user_id = options.rec_user_id ? options.rec_user_id : (theRequest.rec_user_id ? theRequest.rec_user_id :
					0);
				if (rec_user_id != 0) {
					uni.setStorageSync('rec_user_id', rec_user_id);
				}
				let pt_user_id = options.pt_user_id ? options.pt_user_id : (theRequest.pt_user_id ? theRequest.pt_user_id :
					0);
				if (pt_user_id != 0) {
					uni.setStorageSync('pt_user_id', pt_user_id);
				}
				let cg_user_id = options.cg_user_id ? options.cg_user_id : (theRequest.cg_user_id ? theRequest.cg_user_id :
					0);
				if (cg_user_id != 0) {
					uni.setStorageSync('cg_user_id', cg_user_id);
				}
			}
			// #endif
			let cityinfo = uni.getStorageSync("cityinfo")
			if (!cityinfo) {
				// this.getlocation()
			} else {
				this.getlocation()
				// this.cityinfo = cityinfo
			}
			this.init()
			this.getbanner()
			this.getgonggao()
			this.getcgfl() //场馆分类/项目
			this.getcdbq()
			this.getsystem()
		},
		onShow() {
			
			if(this.isload){
				this.isload = false
				return false
			}
			let cityinfo = uni.getStorageSync("cityinfo")
			console.log(cityinfo, "jinglei");
			if (cityinfo.id) {
				if (this.cityinfo.id != cityinfo.id) {
					this.checkareasure.name = ""
					this.checkareasure.id = ""
					this.checkarea.name = ""
					this.checkarea.id = ""
				}
				this.cityinfo = cityinfo
				this.getarealist()
			}
		},
		onShareAppMessage: function() {
			return {
				title: '动佳',
				path: '/pages/kaiping'
			}
		},
		onShareTimeline: function() {
			return {
				title: '动佳',
				path: '/pages/kaiping'
			}
		},
		watch: {
			"cityinfo.id": {
				deep: true,
				handler(newval) {
					this.init()
				}
			}
		},
		methods: {
			changeitem(item){
				if(this.cg_bq_id==item.id){
					this.cg_bq_id = "";
					this.init()
					return false
				}
				this.cg_bq_id = item.id;
				this.init()
			},
			jumpggdetail(){
				if (this.popurl.includes("http")) {
					let data = {
						url2:this.popurl
					}
					uni.navigateTo({
						url:"/pages_homepage/webview?msg="+encodeURIComponent(JSON.stringify(data))
					})
				} else {
					uni.navigateTo({
						url:this.popurl
					})
				}
			},
			getsystem(){
				httpRequest.request('/api/index/getConfigInfo', 'POST', {}, false, false, true).then(res => {
					this.popimages = res.data.index_showimage
					this.popurl = res.data.index_showurl
					if(res.data.index_showurl){
						this.ggshow = getApp().globalData.show
					}
				})
			},
			getcdbq() {
				httpRequest.request('/api/cgcl/cgBqIndex', 'POST', {}, false, false, true).then(res => {
					this.cdbqList = res.data
				})
			},
			changejlpx() { //距离
				this.distance_sort = this.distance_sort == 1 ? 2 : this.distance_sort == 2 ? 0 : 1
				this.init()
			},
			changehp() { //好评
				this.star_sort = this.star_sort == 1 ? 2 : this.star_sort == 2 ? 0 : 1
				this.init()
			},
			changejg() { //价格
				this.price_sort = this.price_sort == 1 ? 2 : this.price_sort == 2 ? 0 : 1
				this.init()
			},
			getcgfl() {
				httpRequest.request('/api/index/cgCategory', 'POST', {}, false, false, true).then(res => {
					this.xmList = res.data
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					city_id: this.cityinfo.id,
					area_id: this.checkareasure.id,
					cg_category_id: this.cg_category_id,
					distance_sort: this.distance_sort,
					star_sort: this.star_sort,
					price_sort: this.price_sort,
					lat: this.lat,
					lng: this.lng,
					cg_bq_id:this.cg_bq_id
				}
				let url = '/api/cgcl/cgIndex1'
				if (this.currenttabtow == 1) { //课程
					url = '/api/kccl/kcIndex'
					data = {
						page: page || 1,
						limit: _this.limit,
						city_id: this.cityinfo.id,
						area_id: this.checkareasure.id,
						cg_category_id: this.cg_category_id,
						distance_sort: this.distance_sort,
						star_sort: this.star_sort,
						price_sort: this.price_sort,
						lat: this.lat,
						lng: this.lng,
						kc_attr: 1,
					}
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
						this.$forceUpdate()
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			jumpurl(url) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url
				})
			},
			returnKmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			checkareafn(item) {
				this.checkarea.name = item.name
				this.checkarea.id = item.id
			},
			qyclose() {
				this.checkareasure.name = ""
				this.checkareasure.id = ""
				this.checkarea.name = ""
				this.checkarea.id = ""
				this.qyshow = false
				console.log(this.checkareasure, 999);
				this.init()
			},
			qyconfirm() {
				this.checkareasure = this.checkarea
				this.qyshow = false
				this.init()
			},
			getarealist() {
				httpRequest.request('/api/index/getAreaList', 'POST', {
					city_id: this.cityinfo.id
				}, false, false, true).then(res => {
					this.areaList = res.data
				})
			},
			getgonggao() {
				httpRequest.request('/api/index/niticeindex', 'POST', {
					page: 1,
					limit: 12,
					type: 1
				}, false, false, true).then(res => {
					let arr = []
					res.data.data.forEach(item => {
						arr.push(item.title)
					})
					this.text1 = arr
				})
			},
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 1,
					is_more: 1
				}, false, false, true).then(res => {
					res.data.forEach(item => {
						this.list1.push(item.image_text)
					})
					this.bannerList = res.data
				})
			},
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log(res, "999");
						_this.lat = res.latitude
						_this.lng = res.longitude
						if (!_this.cityinfo.id) {
							_this.getcityInfo()
						}
					},
					fail(err) {
						// #ifdef APP-PLUS
						// checkOpenGPSServiceByAndroid()
						// #endif
						console.log(err, 23432);
					}
				});
			},
			getcityInfo() {
				httpRequest.request('/api/index/getCurrCity', 'POST', {
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					this.cityinfo = {
						name: res.data.name,
						lat: res.data.lat,
						lng: res.data.lng,
						id: res.data.id,
						pid: res.data.pid
					}
					uni.setStorageSync("cityinfo", this.cityinfo)
					this.getarealist()
				})
			},
			// 跳转秒杀团购以及砍价
			tzgywm(i) {
				uni.navigateTo({
					url: '/pages_homepage/miaosha?id=' + i
				})
			},
			// 跳转课程详情
			tzkecxq(id) {
				uni.navigateTo({
					url: '/pages_homepage/kechenggmxq?id=' + id
				})
			},
			// 跳转场定预定详情
			tzcdyd(id) {
				uni.navigateTo({
					// url: '/pages_homepage/changdingydqx?id=' + id
					url: '/pages_homepage/changguanjieshao?id=' + id
				})
			},
			// 跳转位置
			dakdiz() {
				uni.navigateTo({
					url: '/pages_homepage/dingwei'
				})
			},
			ggclose() {
				this.ggshow = false
				getApp().globalData.show = false
			},
			// 跳转公告
			tzgg() {
				uni.navigateTo({
					url: '/pages_homepage/gonggao?type=1'
				})
			},
			// 跳转baner详情
			tzlbxq(e) {
				uni.navigateTo({
					url: '/pages_homepage/bannerxq?id=' + this.bannerList[0].id
				})
			},
			// 跳转搜索
			tzsousuo() {
				uni.navigateTo({
					url: '/pages_homepage/sousuo?ss_type=' + this.ss_type
				})
			},
			sjclose() {
				this.sjshow = false
			},
			dakai() {
				this.yinc = !this.yinc
			},
			changetab(e) {
				this.currenttabtow = e.index;
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sanzi {
		width: 85rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}

	.guangtu {
		width: 536rpx;
		height: 856rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.guandys {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.quedbtn {
		width: 292rpx;
		height: 72rpx;
		background: #1BA95B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.chongzhibtn {
		width: 292rpx;
		height: 72rpx;
		background: #BAC3D5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wushi {
		width: 50%;
	}

	.dyshaow {
		position: absolute;
		bottom: -190rpx;
		width: 15%;
		z-index: 1;
		left: 16rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.huibtn {
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 6rpx 10rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
	}

	.lvbtn {
		background: #DFFFED;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 6rpx 10rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1BA95B;
	}

	.margin_top0 {
		margin-top: 6rpx;
	}

	.shangsjx {
		width: 10rpx;
		height: 8rpx;
		background-image: url('@/static/image/system/shangsjx.png');
		background-size: 100% 100%;
	}

	.xiasajx {
		width: 10rpx;
		height: 8rpx;
		background-image: url('@/static/image/system/xiasanj.png');
		background-size: 100% 100%;
	}


	.anicon {
		width: 48rpx;
		height: 48rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.weixbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0, 0, 0, 0.09);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx 36rpx 20rpx 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	.xuanzbtn {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #F9F9F9;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1BA95B;
		box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0, 0, 0, 0.09);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx 36rpx 20rpx 20rpx;
	}

	page {
		background-color: #F9F9F9;
	}
.u-notice-bar {
		border-radius: 8rpx;
	}

	::v-deep.u-icon__icon {
		color: #1BA95B !important;
	}
	.dftp {
		width: 330rpx;
		height: 140rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.xfltup {
		width: 212rpx;
		height: 140rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.line {
		width: 2rpx;
		height: 24rpx;
		background: #EEEEEE;
	}

	.xxuanze {
		width: 22.77rpx;
		height: 12.77rpx;

	}
</style>